<template>
  <a-modal
    v-model:visible="visible"
    title="选择支付方式"
    width="400px"
    :footer="null"
    centered
    @cancel="close"
  >
    <div class="payment-modal">
      <!-- 支付方式列表 -->
      <a-radio-group v-model:value="selectedPayment" class="payment-list">
        <a-radio :value="1" class="payment-item">
          <div class="payment-content">
            <span class="payment-name">支付宝支付</span>
          </div>
        </a-radio>
        
        <a-radio :value="2" class="payment-item">
          <div class="payment-content">
            <span class="payment-name">微信支付</span>
          </div>
        </a-radio>
        

      </a-radio-group>
      
      <!-- 支付金额 -->
      <div class="payment-amount">
        <span class="amount-label">支付金额：</span>
        <span class="amount-value">¥{{ amount.toFixed(2) }}</span>
      </div>
      
      <!-- 确认按钮 -->
      <div class="payment-actions">
        <a-button 
          type="primary" 
          block 
          size="large" 
          :loading="loading"
          @click="handleConfirm"
        >
          确认支付
        </a-button>
        <a-button 
          v-if="showCancel"
          style="margin-top: 10px;"
          block 
          size="large" 
          :loading="loading"
          @click="handleCancel"
        >
          生成待支付订单
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import { BankOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const props = defineProps({
  amount: {
    type: Number,
    required: true,
    default: 0
  },
  showCancel: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['success', 'cancel']);

const visible = ref(false);
const loading = ref(false);
const selectedPayment = ref(1); // 默认选择第一个支付方式

// 打开弹窗
const open = () => {
  visible.value = true;
};

// 关闭弹窗
const close = () => {
  visible.value = false;
};

// 取消支付
const handleCancel = () => {
  emit('cancel',{
      paymentType: selectedPayment.value,
      amount: props.amount
    });
  close();
};

// 确认支付
const handleConfirm = () => {
  if (!selectedPayment.value) {
    message.warning('请选择支付方式');
    return;
  }

  loading.value = true;
  
  // 模拟支付处理
  setTimeout(() => {
    loading.value = false;
    message.success('支付成功');
    emit('success', {
      paymentType: selectedPayment.value,
      amount: props.amount
    });
    close();
  }, 1500);
};

// 暴露方法给父组件
defineExpose({
  open,
  close
});
</script>

<style scoped>
.payment-modal {
  padding: 10px;
}

.payment-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

.payment-item {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 15px;
  margin-bottom: 10px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  transition: all 0.3s;
}

.payment-item:hover {
  border-color: #1890ff;
}

.payment-item:deep(.ant-radio) {
  margin-right: 15px;
}

.payment-item:deep(.ant-radio-wrapper) {
  display: flex;
  align-items: center;
  width: 100%;
}

.payment-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.payment-logo {
  height: 24px;
  margin-right: 15px;
}

.payment-icon {
  font-size: 24px;
  color: #1890ff;
  margin-right: 15px;
}

.payment-name {
  font-size: 16px;
  color: #333;
}

.payment-amount {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 15px;
}

.amount-label {
  font-size: 14px;
  color: #666;
}

.amount-value {
  font-size: 20px;
  color: #ff0036;
  font-weight: bold;
  margin-left: 10px;
}

.payment-actions {
  margin-top: 10px;
}
</style>